import { useState } from 'react';
import { toast } from 'sonner';

interface ConflictData {
  localContent: string;
  remoteContent: string;
}

interface ConflictResolverProps {
  conflictData: ConflictData;
  onResolve: (resolvedContent: string) => void;
}

const ConflictResolver = ({ conflictData, onResolve }: ConflictResolverProps) => {
  const [selectedContent, setSelectedContent] = useState<string>(conflictData.localContent);

  const handleUseLocal = () => {
    setSelectedContent(conflictData.localContent);
  };

  const handleUseRemote = () => {
    setSelectedContent(conflictData.remoteContent);
  };

  const handleMerge = () => {
    // 这里可以实现更复杂的合并逻辑，例如基于差异对比
    const mergedContent = conflictData.localContent + '\n' + conflictData.remoteContent;
    setSelectedContent(mergedContent);
  };

  const handleResolve = () => {
    onResolve(selectedContent);
    toast.success('冲突已解决');
  };

  return (
    <div className="p-4 border border-red-500 rounded-md">
      <h3 className="text-lg font-semibold text-red-500">版本冲突</h3>
      <p className="mt-2">本地修改和远程修改存在冲突，请选择解决方案：</p>
      <div className="mt-4 space-y-2">
        <button
          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
          onClick={handleUseLocal}
        >
          使用本地修改
        </button>
        <button
          className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
          onClick={handleUseRemote}
        >
          使用远程修改
        </button>
        <button
          className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
          onClick={handleMerge}
        >
          合并修改
        </button>
      </div>
      <div className="mt-4">
        <textarea
          value={selectedContent}
          onChange={(e) => setSelectedContent(e.target.value)}
          className="w-full p-2 border border-gray-300 rounded"
          rows={4}
        />
      </div>
      <div className="mt-4">
        <button
          className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
          onClick={handleResolve}
        >
          确认解决
        </button>
      </div>
    </div>
  );
};

export default ConflictResolver;
